<template>
    <div v-show="headerInfo.ifHeader">
        <!-- 顶部导航 -->
        <div v-show="headerInfo.isBacknav">
            <div style="height: 2.56rem" v-show="headerInfo.isfixed"></div>
            <div
                class="jsearch_header"
                :class="{
                    headeractive: !headerInfo.isSearchred,
                    headfixed: headerInfo.isfixed,
                }"
            >
                <div class="jcontent">
                    <div class="ds-in-bl search">
                        <div class="j_searlef">
                            <img
                                v-show="headerInfo.isSearchred"
                                src="../assets/newimg/peixun/gg_icon_dingwei.png"
                                alt=""
                            />
                            <img
                                src="../assets/newimg/index/home_icon_dingwei@2x.png"
                                alt=""
                                v-show="!headerInfo.isSearchred"
                            />

                            <span> {{ headData.city }} </span>
                        </div>

                        <div class="sea-box">
                            <span @click="searchStart"></span>
                            <form action="#" @submit.prevent="searchStart">
                                <div class="jsear-input">
                                    <input
                                        type="search"
                                        name="q"
                                        class="search_text"
                                        :value="searchVal"
                                        @input="changeSearchVal"
                                        :placeholder="headerInfo.placeholder"
                                        @click="isgoNewpage"
                                        @Keyup.13="searchStart"
                                        ref="search"
                                    />
                                    <input
                                        type="submit"
                                        @submit="searchStart"
                                    />
                                </div>
                            </form>
                            <!-- <form action="" method="post">
                                <div class="jsear-input">
                                    <input
                                        type="text"
                                        name="q"
                                        id="search_text"
                                        class="search_text"
                                        :value="searchVal"
                                        @input="changeSearchVal"
                                        :placeholder="headerInfo.placeholder"
                                        @click="isgoNewpage"
                                    />
                                </div>
                            </form> -->
                            <i @click="clearSearchval"></i>
                        </div>
                        <div
                            class="j_searchrir"
                            @click="$router.push('/message')"
                        >
                            <img
                                v-show="headerInfo.isSearchred"
                                src="../assets/newimg/peixun/home_icon_xiaoxi.png"
                                alt=""
                            />

                            <img
                                v-show="!headerInfo.isSearchred"
                                src="../assets/newimg/index/home_icon_xiaoxi@2x.png"
                                alt=""
                            />

                            <span v-show="headData.messageNum > 0">
                                {{ headData.messageNum }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-show="!headerInfo.isBacknav">
            <div style="height: 2.0907rem" v-show="!headerInfo.isfixed"></div>
            <div
                class="backnav"
                :class="{
                    isredbackActive: headerInfo.isreadBack,
                    backheadfixed: !headerInfo.isfixed,
                }"
            >
                <h1 @click="$router.go(-1)">
                    <img
                        src="../assets//newimg/index/icon_right_h.png"
                        v-if="!headerInfo.isreadBack"
                        alt=""
                    />
                    <img
                        src="../assets/newimg/index/icon_right_w.png"
                        v-if="headerInfo.isreadBack"
                        alt=""
                    />
                </h1>
                <h2>
                    <span>{{ headerInfo.backText }}</span>
                </h2>

                <van-popover
                    v-model="showPopover"
                    theme="dark"
                    placement="bottom-end"
                >
                    <van-grid square clickable :border="false" column-num="3">
                        <li
                            class="vanitem"
                            @click="changeNavurl('/')"
                            ref="doubtclick"
                        >
                            <div class="icon">
                                <van-icon name="wap-home-o" />
                                <p>首页</p>
                            </div>
                        </li>
                        <li class="vanitem" @click="changeNavurl('/shopCart')">
                            <div class="icon">
                                <van-icon name="shopping-cart-o" />
                                <p>购物车</p>
                            </div>
                        </li>
                        <li class="vanitem" @click="changeNavurl('/user')">
                            <div class="icon">
                                <van-icon name="user-circle-o" />
                                <p style="border: 0">我的</p>
                            </div>
                        </li>
                    </van-grid>

                    <template #reference>
                        <h3>
                            <!-- <img
                                @click="showPopoverfn()"
                                type="primary"
                                v-if="headerInfo.isbacknav"
                                src="../assets/images/class1.png"
                                alt="菜单"
                            /> -->
                            <img
                                @click="showPopoverfn()"
                                type="primary"
                                v-show="headerInfo.isbacknav"
                                v-if="!headerInfo.isreadBack"
                                src="../assets/newimg/index/icon_dh_h.png"
                                alt="菜单"
                            />
                            <img
                                @click="showPopoverfn()"
                                type="primary"
                                v-show="headerInfo.isbacknav"
                                v-if="headerInfo.isreadBack"
                                src="../assets/newimg/index/icon_dh.png"
                                alt="菜单"
                            />
                        </h3>
                    </template>
                </van-popover>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
    name: '',
    data() {
        return {
            showPopover: false,
        };
    },
    computed: {
        ...mapState({
            headerInfo: (state) => state.headerInfo,
            searchVal: (state) => state.searchVal,
            headData: (state) => state.headData,
        }),
    },
    mounted() {
        // console.log(this.headerInfo);
    },
    watch: {},
    methods: {
        ...mapMutations(['changeSearchval', 'changeSearchStatus']),
        isgoNewpage() {
            if (this.headerInfo.turnLink) {
                this.$router.push(this.headerInfo.turnLink);
            }
        },
        changeSearchVal(e) {
            // console.log(e.target.value);
            this.changeSearchval(e.target.value);
        },
        // 清空搜索内容
        clearSearchval() {
            this.changeSearchval('');
            this.changeSearchStatus('false%' + Date.parse(new Date())); // 触发搜索
        },
        // 点击开始搜索
        searchStart() {
            this.changeSearchStatus('true%' + Date.parse(new Date())); // 触发搜索
            this.$refs.search.blur();
        },
        showPopoverfn() {
            this.showPopover = !this.showPopover;
            this.$nextTick(() => {
                this.$refs.doubtclick.click();
            });
        },
        // 切换
        changeNavurl(url) {
            // console.log(url);
            this.showPopover = !this.showPopover;
            this.$router.push(url);
        },
        gosearchPage(type) {
            // console.log(type);
            if (!type) {
                return;
            }
            this.$router.push('/search');
        },
    },
};
</script>
<style lang="less" scope>
body .van-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: block;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.vanitem {
    width: 5.3333rem;
    height: 1.7066rem;

    div {
        height: 1.7066rem;
        display: flex;
        justify-content: center;
        align-items: center;

        .van-icon {
            font-size: 0.8rem;
        }

        p {
            margin-top: 0px;
            height: 1.4933rem;
            line-height: 1.4933rem;
            border-bottom: 1px solid #fff;
            text-align: left;
            font-size: 0.47rem;
            margin-left: 0.5rem;
            width: 50%;
        }
    }
}

.jsearch_header {
    width: 16rem;
    height: 2.56rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

body .headfixed {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999999;
    width: 100%;
}

body .headeractive {
    background: linear-gradient(0deg, #ff3b3b 0%, #fe2241 100%);

    .j_searlef {
        span {
            color: #fff;
        }
    }

    .sea-box {
        background: #fff;
        span {
            background: url('../assets/newimg/index/home_icon_sousuo@2x.png')
                center center no-repeat;
            background-size: 0.6613rem 0.6613rem;
        }
        .jsear-input {
            background: transparent;
        }
        input {
            background: transparent;
        }
    }
}

.headerbg {
    height: 2.56rem;
    z-index: 9999;
}

.jsearch_header .j_searlef span {
    font-size: 0.5973rem;
    font-weight: 400;
    color: #0a0a0a;
    min-width: 1.792rem;
    display: inline-block;
}

.jsearch_header .jcontent {
    margin: 0;
}

.jsearch_header .logo {
    float: left;
    width: 1.024rem;
    height: 1.024rem;
    margin: 0.106667rem 0.384rem;
    border-radius: 50%;
    overflow: hidden;
}

.jsearch_header .logo img {
    width: 100%;
}

.jsearch_header .sea-box {
    width: 10.7933rem;
    height: 1.28rem;
    background: #f6f6f7;
    position: relative;
    margin: 0 0.3693rem;
    border-radius: 0.618667rem;
    overflow: hidden;
}

.jsearch_header .sea-box span {
    background-color: #f6f6f7;
    background-image: url('../assets/newimg/peixun/home_icon_sousuo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.6613rem 0.6613rem;
    height: 0.768rem;
    width: 0.768rem;
    float: left;
    margin: 0.256rem 0;
    margin-left: 0.683rem;
}

.jsearch_header .sea-box i {
    background-color: #f6f6f7;
    background-image: url('../assets/newimg/peixun/home_icon_shanchu.png');
    background-repeat: no-repeat;
    background-size: 0.5333rem 0.5333rem;
    background-position: center;
    height: 0.768rem;
    width: 0.768rem;
    float: left;
    margin: 0.256rem 0;
    margin-left: 0.683rem;
}

.jsearch_header .sea-box .jsear-input {
    width: 7.2rem;
    margin-left: 0.256rem;
    background-color: #f6f6f7;
}

.jsearch_header .sea-box form {
    float: left;
}

.jsearch_header .sea-box input {
    border: none;
    outline: none;
    width: 100%;
    height: 1.28rem;
    color: #666;
    padding: 0 0.256rem;
    font-size: 0.5973rem;
    line-height: 1.28rem;
    background-color: #f6f6f7;
}

.jsearch_header .login {
    margin-left: 0.21333rem;
    font-size: 0.64rem;
}

.jsearch_header .login a {
    color: #fff;
}
.content {
    background-color: rgba(0, 0, 0, 0);
}
</style>
<style scoped lang="less">
body .backheadfixed {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999999;
    width: 100%;
}
body .isredbackActive {
    background: #fe333d;

    h2 {
        color: #fff;
    }
}
.backnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;

    h1 {
        width: 2.0907rem;
        height: 2.0907rem;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 0.4267rem;
        }
    }

    h3 {
        width: 2.0907rem;
        height: 2.0907rem;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 0.8747rem;
        }
    }

    h2 {
        font-size: 0.768rem;
        font-weight: 400;
        color: #000000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
